<!--  -->
<template>
  <div class="main_detail">
    <DetailSwipe
      :detailSwipe="goodsData.detailSwipe"
      v-show="goodsData.detailSwipe.length !== 0"
    ></DetailSwipe>
    <DetailBox :info="goodsData.info"></DetailBox>
    <DetailAttribute
      :attribute="goodsData.attribute"
      :info="goodsData.info"
    ></DetailAttribute>
    <DetailIssue :issue="goodsData.issue"></DetailIssue>
    <DetailRelate :relateData="goodsData.relateData"></DetailRelate>
    <van-action-bar
      style="
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        width: 100%;
        height: 50px;
      "
    >
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="goodsData.cartTotal"
        @click="router.push('/cart')"
      />
      <van-action-bar-icon
        :icon="isChange ? 'star' : 'star-o'"
        :text="isChange ? '已收藏' : '未收藏'"
        :color="isChange ? '#ff5000' : '#595c5a'"
        @click="change"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
import DetailSwipe from "./components/detailSwipe.vue";
import DetailBox from "./components/detailBox.vue";
import DetailAttribute from "./components/detailAttribute.vue";
import DetailIssue from "./components/detailIssue.vue";
import DetailRelate from "./components/detailRelate.vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted, reactive, ref, watch } from "vue";
import {
  getGoodsDetail,
  getRelateGoods,
  getGoodsCount,
  cartAdd,
} from "@/api/api.ts";
import { Toast } from "vant";
import { useStore } from "vuex";
// 收藏与未收藏
const store = useStore();
let isChange = ref(false);
const change = () => {
  isChange.value = !isChange.value;
};
const goodsData = reactive({
  // 轮播图
  detailSwipe: [],
  // 商品信息
  info: {},
  // 商品参数
  attribute: [],
  // 问题
  issue: [],
  // 相关产品
  relateData: [],
  cartTotal: 0,
  // 加入购物车所需数据
  productList: [],
});
const router = useRouter();
const route = useRoute();
let getGoodsData = async () => {
  const res = await getGoodsDetail(route.query.id);
  console.log(res);
  goodsData.detailSwipe = res.data.gallery;
  goodsData.info = res.data.info;
  goodsData.attribute = res.data.attribute;
  goodsData.issue = res.data.issue;
  goodsData.productList = res.data.productList;
  console.log(goodsData.productList);
  const res1 = await getGoodsCount();
  const token = localStorage.getItem("token");
  if (token) {
    goodsData.cartTotal = res1.data.cartTotal.goodsCount;
  } else {
    delete goodsData.cartTotal;
  }
  console.log(res1);
};
const getRelateData = async () => {
  const res = await getRelateGoods(route.query.id);
  console.log(res);
  goodsData.relateData = res.data.goodsList;
};
// 添加购物车
const addCart = async () => {
  const token = localStorage.getItem("token");
  if (token) {
    const res = await cartAdd({
      goodsId: route.query.id,
      productId: goodsData.productList[0].id, //加入购物车接口 产品id，来自productList的第一个数组项中的id
      number: store.cartNum,
    });
    console.log(res);
  } else {
    Toast.fail("请先登录");
    router.push({
      path: "/user",
    });
  }
};
onMounted(() => {
  getGoodsData();
  getRelateData();
  // console.log(route.query);
});
// 监听路由变化
watch(
  () => route.query,
  () => {
    console.log(route.path);
    if (route.path === "/detail") {
      getGoodsData();
      getRelateData();
      window.scrollTo(0, 0);
    }
  }
);
</script>

<style lang="scss" scoped>
.main_detail {
  width: 100%;
  padding-bottom: 150px;
}
</style>
